<template>
  <div class="box2">
    <!--搜索框 过滤框 -->
    <div class="SearchFilter">
      <el-cascader
        placeholder="请选择要查看的状态"
        :options="FilterList"
        filterable
        :show-all-levels="false"
        :props="FilterProps"
        @change="result2"
        clearable
        v-model="nowSelect"
      ></el-cascader>
      <form-input
        class="NameSearchInput"
        placeholder=" 输入要查找的用户名"
        v-model="filterText"
      >
      </form-input>
    </div>
    <!-- 内容展示 -->
    <div class="exhibition">
      <el-table
        id="table"
        :data="
          tables.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        style="width: 100%"
      >
        <el-table-column
          fixed
          prop="id"
          label="序号"
          width="60%"
          align="center"
        >
        </el-table-column>
        <el-table-column
          fixed
          prop="username"
          label="用户姓名"
          align="center"
          width="140px"
        >
        </el-table-column>
        <el-table-column prop="customspassName" label="关卡名称" width="250px">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              title="关卡名称"
              width="200px"
              trigger="hover"
              :content="scope.row.customspassName"
            >
              <div slot="reference" class="twoLineCls">
                {{ scope.row.customspassName }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="managerName"
          label="管理员姓名"
          width="140px"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="startCheckTime"
          label="发起验收时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="appointmentTime"
          label="申请验收时间"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="120px"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag type="success" v-show="scope.row.status == 1" color="#fff"
              >验收通过</el-tag
            >
            <el-tag type="danger" v-show="scope.row.status == -1" color="#fff"
              >验收失败</el-tag
            >
            <el-tag type="info" v-show="scope.row.status == 0" color="#fff"
              >未处理</el-tag
            >
            <el-tag type="warning" v-show="scope.row.status == 2" color="#fff"
              >正在处理</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="" label="" align="" width="1"> </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="240px"
          align="center"
        >
          <template slot-scope="scope">
            <alter-button
              type="warning"
              size="small"
              v-show="scope.row.status == 0"
              @click="Begin(scope.$index, scope.row), Show()"
              >开始验收</alter-button
            >
            <alter-button
              type="success"
              size="small"
              v-show="scope.row.status == 2"
              @click="Pass(scope.$index, scope.row), Show()"
              >通过</alter-button
            >
            <alter-button
              @click.native.prevent="Failed(scope.$index, scope.row), Show()"
              type="danger"
              size="small"
              v-show="scope.row.status == 2"
              >不通过
            </alter-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 展示分页 -->
    <div class="paging">
      <el-pagination
        background
        :page-size="pageSize"
        :current-page="currentPage"
        layout="prev, pager, next"
        :total="tables.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { mixin } from "@/mixin.js";
import { mapMutations } from "vuex";
import { getAllCheckAPI, CheckHandleAPI } from "@/api/utils";
export default {
  mixins: [mixin],
  async mounted() {
    // this.StateHandle()
    // this.tables = this.Newtables
    const res = await getAllCheckAPI();
    this.tableData = res.data;
    this.StatusSort();
  },
  computed: {
    //  输入检索内容
    tables() {
      const filterText = this.filterText;
      if (filterText) {
        return this.Newtables.filter((data) => {
          return Object.keys(data).some((key) => {
            if (key == "username") {
              return String(data[key]).indexOf(filterText) > -1;
            }
          });
        });
      }
      return this.Newtables;
    },
  },
  data() {
    return {
      //搜索框
      filterText: "",
      //过滤框
      nowSelect: "",
      currentPage: 1,
      // 表单过滤
      Newtables: [],
      FilterList: [
        { name: "未处理", StatusId: "0" },
        { name: "正在处理", StatusId: "2" },
        { name: "验收通过", StatusId: "1" },
        { name: "验收失败", StatusId: "-1" },
      ],
      FilterProps: {
        value: "StatusId",
        label: "name",
        children: null,
      },
      tableData: [],
      pageSize: 7,
    };
  },
  methods: {
    // 按状态排序
    StatusSort() {
      let arr1 = [];
      let arr2 = [];
      this.tableData.forEach((e) => {
        if (e.status == 0 || e.status == 2) {
          arr1.push(e);
        } else {
          arr2.push(e);
        }
      });
      arr1.sort(function (a, b) {
        return a.status - b.status;
      });
      arr2.sort(function (a, b) {
        return b.status - a.status;
      });
      this.Newtables = [];
      this.Newtables = this.Newtables.concat(arr1, arr2);
    },
    // 页面刷新
    ...mapMutations("Refresh", { Show: "Show" }),
    // 页面刷新
    PageRefresh() {
      this.$nextTick(function () {
        this.$store.state.Refresh.isRouterAlive = true;
      });
    },
    // 表单过滤
    result2() {
      if (this.nowSelect.length == 0) {
        this.StatusSort();
      } else {
        this.StatusSort();
        this.Newtables = this.Newtables.filter((s) => {
          return s.status == this.nowSelect[0];
        });
      }
    },
    // 开始处理状态
    async StartProcess(s, i) {
      return CheckHandleAPI(s, i).then((res) => {
        if (res.status == 200) {
          this.$message.success("状态修改成功!");
          this.PageRefresh();
        } else {
          this.$message.error("状态修改失败!");
        }
      });
    },
    // 状态改成正在处理
    Begin(index, row) {
      // console.log(row.userId);
      this.StartProcess("S", row.id);
    },
    // 验收通过
    Pass(index, row) {
      this.StartProcess("Y", row.id);
    },
    // 验收失败
    Failed(index, row) {
      this.StartProcess("N", row.id);
    },
    // 状态处理
    StateHandle() {
      this.tables.forEach((e) => {
        if (e.status == "-1") {
          e.status = "验收失败";
        } else if (e.status == "0") {
          e.status = "未处理";
        } else if (e.status == "1") {
          e.status = "验收成功";
        } else {
          e.status = "正在处理";
        }
      });
    },
  },
};
</script>

<style scoped>
/* 搜索框和过滤框的外包盒子 */
.SearchFilter {
  display: flex;
}
.NameSearchInput {
  width: 200px;
  margin-left: 40px;
}
.exhibition {
  width: 100%;
  height: 460px;
  margin-top: 10px;
}
.paging {
  width: 100%;
  height: 30px;
  margin-bottom: 0;
  text-align: center;
}
/* 表单操作按钮样式处理 */
.exhibition /deep/ .el-button + .el-button {
  margin-left: 0;
  margin-right: 10px;
}
.exhibition /deep/ .el-button--small {
  padding: 8px;
}
.exhibition /deep/ .el-button {
  width: 70px;
}
.exhibition /deep/ .el-tag {
  border-color: #fff;
}
/* .exhibition .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
   border-right: 2px solid #ccc !important;
 } */
.twoLineCls {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.SearchFilter /deep/.el-input__inner {
  border: 3px solid #dcdfe6;
}
.NameSearchInput /deep/.el-cascader .el-input .el-input__inner {
  border: 3px solid #dcdfe6;
}
.el-table--border {
  border: 3px solid #ebeef5;
}
.exhibition /deep/.el-table .cell {
  color: #666;
}
.exhibition /deep/.twoLineCls {
  color: black;
}
.exhibition /deep/.el-table th.el-table__cell,
.exhibition /deep/.el-table tr,
.exhibition /deep/.el-table {
  background-color: rgba(255, 255, 255, 0.3);
}
</style>